<template>
  <VueDraggable class="drag-area" group="g1" v-bind="attrs">
    <div
      class="drag-area_item"
      v-for="(item, index) in attrs.modelValue"
      :key="item[keyProp]"
    >
      <div class="drag-content">
        <!-- 折叠 -->
        <div
          v-show="item.children && item.children.length"
          class="expaned"
          :class="expanedDrag[item[keyProp]] ? '' : 'active_icon'"
        >
          <ElIcon @click="handleExpaned(item)"><ArrowDownBold /></ElIcon>
        </div>
        <div class="content">
          <slot :item="item"></slot>
        </div>
      </div>
      <Draggable
        v-if="item.children"
        v-model="item.children"
        v-bind="props"
        :class="!expanedDrag[item[keyProp]] ? 'hidden' : ''"
        :style="{ '--level': index }"
      >
        <template v-slot="{ item: childItem }">
          <div v-show="expanedDrag[item[keyProp]]">
            <slot :item="childItem" />
          </div>
        </template>
      </Draggable>
    </div>
  </VueDraggable>
</template>
<script setup>
import { VueDraggable } from "vue-draggable-plus";
import { ref, useAttrs } from "vue";
defineOptions({
  name: "Draggable",
});
const props = defineProps({
  keyProp: { type: String, required: true },
});
const attrs = useAttrs();
const expanedDrag = ref(
  attrs.modelValue
    .filter((v) => v.children)
    .reduce((a, b) => ((a[b[props.keyProp]] = true), a), {})
);
function handleExpaned(item) {
  const key = item[props.keyProp];
  expanedDrag.value[key] = !expanedDrag.value[key];
}
</script>
<style scoped>
/* .drag-area:empty {
  position: relative;
} 
.drag-area:empty::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: var(--smallTextColor);
} */
.drag-area {
  padding-left: 1.25rem;
  min-height: 50px;
  /* margin: 20px 0; */
}
.drag-area.hidden {
  display: none;
}
.drag-content {
  display: flex;
  gap: 5px;
}
.drag-content .content {
  flex: 1;
}
.expaned {
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active_icon {
  transform: rotate(-90deg);
}
</style>
